import React, { useState, useRef, useEffect, useImperativeHandle } from 'react';
import { Modal, InputNumber, Button, Row, Col, Space, Radio } from 'antd';
import { useUpdateEffect } from 'ahooks';
import { v4 as uuidv4 } from 'uuid';
import './index.less'
const XComponents = (props) => {
    const { xList = [], val, children, gd = false } = props
    if (xList.includes(val)) {
        return <div className='SeatMapModal_seat_x'>
            {children}
            {gd && <div className='SeatMapModal_seat_xConponents'></div>}
        </div>
    }
    return children
}
const SeatEditor = (props) => {
    const { cRef, detail, show } = props
    const [data, setData] = useState({
        rowCount: 10,
        ColCount: 10,
        list: [],
        xList: [],
        yList: [],
        mapType: 'default'
    })
    const { rowCount, ColCount, list, xList, yList, mapType } = data
    useImperativeHandle(cRef, () => ({
        getData: () => {
            return mapType === 'default' ? '' : JSON.stringify({
                ...data,
                xList: Array.from(new Set([...xList])).sort().filter(s => { return s }),
                yList: Array.from(new Set([...yList])).sort().filter(s => { return s })
            })
        },
        initData: (data) => setData(data),

    }));
    const initSetData = () => {
        const seatMap = new Map();
        list.forEach(seat => {
            seatMap.set(`${seat.x}-${seat.y}`, seat);
        });

        const newSeats = [];
        for (let x = 1; x <= rowCount; x++) {
            for (let y = 1; y <= ColCount; y++) {
                const key = `${x}-${y}`;
                const existingSeat = seatMap.get(key);

                if (existingSeat) {
                    newSeats.push(existingSeat);
                } else {
                    newSeats.push({
                        x,
                        y,
                        id: uuidv4(),
                        status: 'available',
                    });
                }
            }
        }
        setData({
            ...data,
            list: newSeats
        });
    }
    useEffect(() => {
        if (show) {
            if (detail.id && detail.seatConfig.list.length > 0) {
                setData(detail.seatConfig)
            }
            else {
                initSetData()
            }
        }


    }, [show])
    useUpdateEffect(() => {
        initSetData()
    }, [data.rowCount, data.ColCount])
    const ColLiner = new Set(list.map(val => {
        return val.y
    }))
    const RenderItemList = (props) => {
        const { data, allData } = props
        return <div className='SeatMapModal_seat_list'>
            {list.filter(val => {
                return val.y === data
            }).map((val, index) => {
                const { status, x, id } = val
                return <div
                    key={index}
                    onClick={() => {
                        setData({
                            ...allData,
                            list: list.map((s,) => {
                                if (val.id === s.id) {
                                    return {
                                        ...s,
                                        status: s.status === 'available' ? 'none' : 'available'
                                    }
                                }
                                return s

                            })
                        })
                    }}
                    style={yList.includes(x) ? { marginRight: 24 } : {}}
                    className={`SeatMapModal_seat_listItem ${status === 'available' ? 'SeatMapModal_seat_listNoCheck' : ''}`}
                >
                </div>
            })}
        </div>
    }
    const TabList = [
        {
            label: '暂不配置',
            key: 'default',
        },
        {
            label: '配置座位',
            key: 'custor',
        },
    ]
    return (
        <Row gutter={[24, 24]}>
            <Col span={24}>
                <Radio.Group
                    value={mapType}
                    onChange={(e) => {
                        setData({
                            ...data,
                            mapType: e.target.value
                        })
                    }}
                    style={{
                        marginBottom: 16,
                    }}
                >
                    {TabList.map((item, index) => {
                        return <Radio.Button key={index} value={item.key}>{item.label}</Radio.Button>
                    })}
                </Radio.Group>
            </Col>
            {mapType === 'custor' && <Col span={24}>
                <div className='SeatMapModal_box'>
                    <div className='SeatMapModal_desc_box'>
                        共计{list.filter(val => {
                            return val.status !== 'none'
                        }).length}个座位
                    </div>
                    <div className=''>
                        <div>
                            <Space>
                                <Button onClick={() => {
                                    setData({
                                        ...data,
                                        xList: [...xList, '']
                                    })
                                }} type='link'>
                                    添加 列过道
                                </Button>
                                {xList.map((item, index) => {
                                    return <InputNumber onChange={(e) => {
                                        console.log(e)
                                        setData({
                                            ...data,
                                            xList: xList.map((items, o) => {
                                                if (o === index) {
                                                    return e
                                                }
                                                return items
                                            })
                                        })
                                    }} key={index} max={ColCount} value={item}></InputNumber>
                                })}
                            </Space>
                        </div>
                        <div style={{ marginTop: 12 }}>
                            <Space>
                                <Button onClick={() => {
                                    setData({
                                        ...data,
                                        yList: [...yList, '']
                                    })
                                }} type='link'>
                                    添加 纵过道
                                </Button>
                                {yList.map((item, index) => {
                                    return <InputNumber onChange={(e) => {
                                        console.log(e)
                                        setData({
                                            ...data,
                                            yList: yList.map((items, o) => {
                                                if (o === index) {
                                                    return e
                                                }
                                                return items
                                            })
                                        })
                                    }} key={index} max={rowCount} value={item}></InputNumber>
                                })}
                            </Space>
                        </div>
                    </div>
                    <div className='SeatMapModal_seat_setting'>
                        <div style={{ paddingTop: 5 }}> 座位设置：</div>
                        <div>
                            <Space className='SeatMapModal_seat_handle'>

                                <div>
                                    纵
                                </div>
                                <InputNumber onChange={(e) => {
                                    setData({
                                        ...data,
                                        ColCount: e
                                    })
                                }} value={ColCount}></InputNumber>
                                <div>
                                    列
                                </div>
                                <InputNumber onChange={(e) => {
                                    setData({
                                        ...data,
                                        rowCount: e
                                    })
                                }} value={rowCount}></InputNumber>
                            </Space>
                            <div style={{ marginTop: 12 }} className='SeatMapModal_seat_list'>
                                <div className='SeatMapModal_seat_liner'>
                                    {ColLiner.map((item, index) => {
                                        return <XComponents val={index} xList={xList} yList={yList}>
                                            <div key={index} className='SeatMapModal_seat_count'>
                                                {item}
                                            </div>
                                        </XComponents>

                                    })}

                                </div>
                                <div style={{ position: 'relative' }}>
                                    {[...yList].sort().filter(val => {
                                        return val
                                    }).map((val, index) => {
                                        if (!val) {
                                            return null
                                        }
                                        return <div style={{ left: val * '26' + index * 18 + 'px' }} className='SeatMapModal_seat_yComponents' key={index}></div>
                                    })}
                                    {ColLiner.map((val, index) => {
                                        return <XComponents gd={true} val={index} xList={xList} yList={yList}>

                                            <RenderItemList allData={data} data={val}></RenderItemList>
                                        </XComponents>
                                    })}
                                </div>

                            </div>
                        </div>

                    </div>
                </div>
            </Col>}
        </Row>

    );
};

export default SeatEditor;